<template>
  <div class="card">
    <el-row :gutter="30" class="card-row">
      <el-col :xs="24" :sm="12" :lg="6" class="card-row-col" v-loading="projectSumLoading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="card-panel">
          <icon-svg name="form" class="svg-icon" style="color: #40c9c6;"></icon-svg>
          <span class="desc">已立项目数</span>
          <count-to class="number" :startVal=0 :endVal="projectSum.totalCount" :duration="1500" v-if="projectSum"/>
          <span class="more" @click="$router.push({ name: 'project-project-query-audited' })">更多</span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-row-col" v-loading="projectContractSumLoading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="card-panel">
          <icon-svg name="paper_files" class="svg-icon" style="color: #ffa146;"></icon-svg>
          <span class="desc">已签订项目合同数</span>
          <count-to class="number" :startVal=0 :endVal="projectContractSum.totalCount" :duration="1500" v-if="projectContractSum"/>
          <span class="more" @click="$router.push({ name: 'project-project-link-contract' })">更多</span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-row-col">
        <div class="card-panel">
          <icon-svg name="date_and" class="svg-icon" style="color: #36a3f7;"></icon-svg>
          <span class="desc">未验收项目数</span>
          <count-to class="number" :startVal=0 :endVal=0 :duration="1500"/>
          <span class="more">更多（待完善）</span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" class="card-row-col">
        <div class="card-panel">
          <icon-svg name="yen_coin" class="svg-icon" style="color: #f4516c;"></icon-svg>
          <span class="desc">待付款金额</span>
          <count-to class="number" :startVal=0 :endVal=0 :duration="1500"/>
          <span class="more">更多（待完善）</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
  name: "dashboardCard",
  components: {
    countTo
  },
  data() {
    return {
      projectSum: null,
      projectSumLoading: true,
      projectContractSum: null,
      projectContractSumLoading: true
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    // 获取相应数据
    initData () {
      setTimeout(() => {
        this.getProjectSum()
      }, 500)
      setTimeout(() => {
        this.getProjectContractSum()
      }, 1000)
    },
    // 获取项目sum
    getProjectSum () {
      this.projectSumLoading = true
      this.$http({
        url: this.$http.requestUrl('/project/projectinfo/sum'),
        method: 'get',
        params: this.$http.requestParams({
          'flowType': 'fill'
        }),
        headers: {
          isLoading: false
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.projectSum = data.sum
        } else {
          this.projectSum = null
        }
        this.projectSumLoading = false
      })
    },
    // 获取项目合同sum
    getProjectContractSum () {
      this.projectContractSumLoading = true
      this.$http({
        url: this.$http.requestUrl('/project/projectlinkcontract/sum'),
        method: 'get',
        params: this.$http.requestParams({
        }),
        headers: {
          isLoading: false
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.projectContractSum = data.sum
        } else {
          this.projectContractSum = null
        }
        this.projectContractSumLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .card {
    overflow: hidden;
    background: transparent !important;
    .card-row {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      background: transparent !important;
      .card-row-col {
        margin-bottom: 5px;
      }
      .card-row-col:last-child {
        margin-bottom: 0;
      }
      .card-panel {
        height: 125px;
        line-height: 125px;
        text-align: center;
        margin: 10px 10px 10px 10px;
        box-sizing: border-box;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        position: relative;
        border-radius: 8px;
        box-shadow: 0 0px 7px rgba(28,76,186,.08);
        transition: box-shadow .3s;
        &:hover {
          box-shadow: 0 5px 20px rgba(28,76,186,.12);
        }
        .svg-icon {
          width: 3em;
          height: 3em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          -moz-transform: translate(0, -50%);
          -webkit-transform: translate(0, -50%);
          bottom: 0;
          left: 10%;
        }

        .number {
          color: #515a6e;
          font-size: 26px;
          line-height: 26px;
          margin: 0;
          position: absolute;
          bottom: 50%;
          right: 10%;
        }

        .desc {
          color: #999999;
          font-size: 12px;
          line-height: 14px;
          height: 14px;
          position: absolute;
          bottom: 30%;
          right: 10%;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
        }
        .more {
          color: #409eff;
          font-size: 14px;
          cursor: pointer;
          line-height: 14px;
          height: 14px;
          position: absolute;
          bottom: 10%;
          right: 10%;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
        }
      }

    }
  }
</style>
